<div id="content">
    <div class="row">
        <big-breadcrumbs items="['Projects', 'Overview']" icon="file-text-o"
                         class="col-xs-12 col-sm-7 col-md-7 col-lg-4"></big-breadcrumbs>

        <div class="col-xs-12 col-sm-5 col-md-5 col-lg-8 text-right">

            <a href-void class="btn btn-default shop-btn">
                <i class="fa fa-3x fa-shopping-cart"></i>
                <span class="air air-top-right label-danger txt-color-white padding-5">10</span>
            </a>
            <a href-void class="btn btn-default">
                <i class="fa fa-3x fa-print"></i>
            </a>

        </div>
    </div>
    <!--
        The ID "widget-grid" will start to initialize all widgets below
        You do not need to use widgets if you dont want to. Simply remove
        the <section></section> and you can use wells or panels instead
        -->
    <!-- widget grid -->
    <section widget-grid id="widget-grid">
        <!-- row -->
        <div class="row">
            <!-- NEW WIDGET START -->
            <article class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                <!-- Widget ID (each widget will need unique ID)-->
                <div class="well" id="widget-title-widget" data-jarvis-widget>
                    <!-- widget options:
                        usage: <div data-jarvis-widget id="wid-id-0" data-widget-editbutton="false">
                        data-widget-colorbutton="false"
                        data-widget-editbutton="false"
                        data-widget-togglebutton="false"
                        data-widget-deletebutton="false"
                        data-widget-fullscreenbutton="false"
                        data-widget-custombutton="false"
                        data-widget-collapsed="true"
                        data-widget-sortable="false"
                    -->
                    <header>
                        <span class="widget-icon"> <i class="fa fa-comments"></i> </span>

                        <h2>Widget Title </h2>
                    </header>
                    <!-- widget div-->
                    <div>
                        <!-- widget content -->
                        <div class="widget-body no-padding">

                            <table datatable-basic data-table-options="tableOptions" bind-filters="true"
                                   class="display projects-table table table-striped table-bordered table-hover"
                                   cellspacing="0" width="100%">
                                <thead>
                                <tr>
                                    <th class="hasinput" style="width:10%">
                                        <input type="text" class="form-control" placeholder="Find ID" />
                                    </th>
                                    <th class="hasinput" style="width:12%">
                                        <input type="text" class="form-control" placeholder="Filter Cust ID" />
                                    </th>
                                    <th class="hasinput icon-addon">
                                        <input id="dateselect_filter" type="text" placeholder="Purchase Date" class="form-control datepicker" data-dateformat="yy/mm/dd">
                                        <label for="dateselect_filter" class="glyphicon glyphicon-calendar no-margin padding-top-15" rel="tooltip" title="" data-original-title="Purchase Date"></label>
                                    </th>
                                    <th class="hasinput">
                                        <input type="text" class="form-control" placeholder="Delivery Date" />
                                    </th>
                                    <th class="hasinput" style="width:12%">
                                        <input type="text" class="form-control" placeholder="Base Price Filter" />
                                    </th>
                                    <th class="hasinput" style="width:10%">
                                        <input type="text" class="form-control" placeholder="ZipCode Filter" />
                                    </th>
                                    <th class="hasinput" style="width:10%">
                                        <input type="text" class="form-control" placeholder="Status Filter" />
                                    </th>

                                </tr>
                                <tr>
                                    <th data-class="expand">Order ID</th>
                                    <th >Cust ID / Phn</th>
                                    <th data-hide="phone, tablet">Purchase</th>
                                    <th data-hide="phone, tablet">Delivery</th>
                                    <th data-hide="phone,tablet">Base Price</th>
                                    <th data-hide="phone,tablet">Postal/Zip</th>
                                    <th>Status</th>
                                </tr>
                                </thead>

                            </table>
                        </div>
                        <!-- end widget content -->
                    </div>
                    <!-- end widget div -->
                </div>
                <!-- end widget -->
            </article>
            <!-- WIDGET END -->
        </div>
        <!-- end row -->
    </section>
    <!-- end widget grid -->
</div>
